<template>
  <QuillEditor
    ref="refEditor"
    v-bind="$attrs"
    content-type="html"
    :options="options"
    :style="`height: ${props.height}px`"
    :content="props.value"
    @update:content="handleChangeContent"
  />
</template>

<script setup lang="ts">
import * as Quill from 'quill'
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
import './quill.css'
import type { Tbar } from './types'
import { ref } from 'vue'

const refEditor = ref()

const emits = defineEmits(['update:value'])

const props = withDefaults(
  defineProps<{
    value?: string
    height?: number
    tbar?: Tbar
    readonly?: boolean
  }>(),
  {
    value: '',
    height: 300,
    tbar: 'small',
    readonly: false
  }
)

var fonts = ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial', 'Times-New-Roman', 'sans-serif']
// 自定义字号的大小，注意下面的内容要和css里面对应上
var sizes = [false, '16px', '18px', '20px', '22px', '26px', '28px', '30px']

var Size = Quill.import('formats/size')
Size.whitelist = sizes
Quill.register(Size, true)
var Font = Quill.import('formats/font')
Font.whitelist = fonts //将字体加入到白名单
Quill.register(Font, true)

const smallTbar = [
  ['bold', 'italic', 'underline', 'strike'], // toggled buttons
  [{ header: 1 }, { header: 2 }], // custom button values
  [{ list: 'ordered' }, { list: 'bullet' }],
  [{ size: ['small', false, 'large', 'huge'] }], // custom dropdown
  [{ color: [] }, { background: [] }], // dropdown with defaults from theme
  ['link', 'image', 'video'] // 链接、图片、视频
]
const fullTbar = [
  ['bold', 'italic', 'underline', 'strike'], // toggled buttons
  ['blockquote', 'code-block'],

  [{ header: 1 }, { header: 2 }], // custom button values
  [{ list: 'ordered' }, { list: 'bullet' }],
  [{ script: 'sub' }, { script: 'super' }], // superscript/subscript
  [{ indent: '-1' }, { indent: '+1' }], // outdent/indent
  [{ direction: 'rtl' }], // text direction

  // [{ size: ['small', false, 'large', 'huge'] }], // custom dropdown
  [{ size: sizes }], // 配置字号
  [{ header: [1, 2, 3, 4, 5, 6, false] }],

  [{ color: [] }, { background: [] }], // dropdown with defaults from theme
  [{ font: fonts }],
  [{ align: [] }],
  ['link', 'image', 'video'], // 链接、图片、视频

  ['clean']
]

const options = {
  modules: {
    // 工具栏配置
    toolbar: props.tbar === 'small' ? smallTbar : fullTbar
  },
  placeholder: '',
  readonly: props.readonly,
  theme: 'snow'
}

const handleChangeContent = (val: any) => {
  console.log(val)
  const html = refEditor.value.getHTML()
  console.log(html)
  emits('update:value', html)
}
</script>

<style lang="scss">
.ql-snow {
  .ql-editor {
    line-height: normal !important;
  }
  .ql-tooltip[data-mode='link']::before {
    content: '请输入链接地址:';
  }
  .ql-tooltip.ql-editing a.ql-action::after {
    border-right: 0px;
    content: '保存';
    padding-right: 0px;
  }

  .ql-tooltip[data-mode='video']::before {
    content: '请输入视频地址:';
  }

  // .ql-picker.ql-size .ql-picker-label::before,
  // .ql-picker.ql-size .ql-picker-item::before {
  //   content: '14px';
  // }
  // .ql-picker.ql-size .ql-picker-label[data-value='small']::before,
  // .ql-picker.ql-size .ql-picker-item[data-value='small']::before {
  //   content: '10px';
  // }
  // .ql-picker.ql-size .ql-picker-label[data-value='large']::before,
  // .ql-picker.ql-size .ql-picker-item[data-value='large']::before {
  //   content: '18px';
  // }
  // .ql-picker.ql-size .ql-picker-label[data-value='huge']::before,
  // .ql-picker.ql-size .ql-picker-item[data-value='huge']::before {
  //   content: '32px';
  // }

  .ql-picker.ql-header .ql-picker-label::before,
  .ql-picker.ql-header .ql-picker-item::before {
    content: '文本';
  }
  .ql-picker.ql-header .ql-picker-label[data-value='1']::before,
  .ql-picker.ql-header .ql-picker-item[data-value='1']::before {
    content: '标题1';
  }
  .ql-picker.ql-header .ql-picker-label[data-value='2']::before,
  .ql-picker.ql-header .ql-picker-item[data-value='2']::before {
    content: '标题2';
  }
  .ql-picker.ql-header .ql-picker-label[data-value='3']::before,
  .ql-picker.ql-header .ql-picker-item[data-value='3']::before {
    content: '标题3';
  }
  .ql-picker.ql-header .ql-picker-label[data-value='4']::before,
  .ql-picker.ql-header .ql-picker-item[data-value='4']::before {
    content: '标题4';
  }
  .ql-picker.ql-header .ql-picker-label[data-value='5']::before,
  .ql-picker.ql-header .ql-picker-item[data-value='5']::before {
    content: '标题5';
  }
  .ql-picker.ql-header .ql-picker-label[data-value='6']::before,
  .ql-picker.ql-header .ql-picker-item[data-value='6']::before {
    content: '标题6';
  }

  .ql-picker.ql-font .ql-picker-label::before,
  .ql-picker.ql-font .ql-picker-item::before {
    content: '标准字体';
  }
  .ql-picker.ql-font .ql-picker-label[data-value='serif']::before,
  .ql-picker.ql-font .ql-picker-item[data-value='serif']::before {
    content: '衬线字体';
  }
  .ql-picker.ql-font .ql-picker-label[data-value='monospace']::before,
  .ql-picker.ql-font .ql-picker-item[data-value='monospace']::before {
    content: '等宽字体';
  }
}
</style>
